<template>
    <div id="replacelist" class="same-change-oldstyle" >
        <div class="same-head-box" >
            <div class="saem-seat-box" style="padding: 15px 0;">
                <div class="saem-seat-left">
                    <span>当前位置：</span>
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item>设备中心</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/devicelist' }">设备管理</el-breadcrumb-item>
                        <el-breadcrumb-item>替换记录</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="saem-seat-right">
                    <button class="same-search-btns" @click="returnBack">返回</button>
                </div>
            </div>
        </div>
        <div class="devicewrap same-table-box">
            <div class="topsearchwrap"></div>

            <div class="table_box">


                <div class="common-table-outer">
                    <el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
                        :data="tableData" stripe>
                        <el-table-column align="center" prop="id" width="120" label="ID">
                        </el-table-column>

                        <el-table-column align="center" prop="old_number" label="原设备编号">
                        </el-table-column>

                        <el-table-column align="center" prop="new_number" label="新设备编号">
                        </el-table-column>

                        <el-table-column align="center" label="操作来源">
                            <template slot-scope="scope">
                                <span v-if="scope.row.operator_type == 1">总后台</span>
                                <span v-else-if="scope.row.operator_type == 2">合伙人</span>
                            </template>
                        </el-table-column>

                        <el-table-column align="center" prop="operator_name" label="操作人">
                        </el-table-column>

                        <el-table-column align="center" prop="add_time" label="操作时间">
                        </el-table-column>

                        <template slot="empty" v-if="!loading">
                            <div class="new-no-data-show">
                                <img src="../../assets/images/no-data.png" alt="">
                                <div>暂无相关数据</div>
                            </div>
                        </template>
                    </el-table>

                    <div class="same-page-inShow" v-if="tableData.length>0 && !loading">
                        <!--//  分页-->
                        <el-pagination background class="pull-right clearfix" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange" :current-page.sync="pageNo"
                            :page-sizes="pageSizesList" :page-size="pageSize"
                            layout="total, prev, pager, next, jumper, sizes" :total="totalDataNumber">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { regionDataPlus } from "element-china-area-data";
    export default {
        name: "replacelist",
        data: function () {
            return {
                pageNo: 1,
                pageSize: 20,
                pageSizesList: [20, 30, 40, 50],
                tableData: [], // 返回的结果集合
                totalDataNumber: 0, // 数据的总数,-----
                time: "",
                stateoption: [
                    {
                        value: 0,
                        label: "全部状态"
                    },
                    {
                        value: 1,
                        label: "在线"
                    },
                    {
                        value: 2,
                        label: "离线"
                    }
                ],
                state: this.$route.query.stat_es == 2 ? 2 : "",
                noticeoption: [
                    {
                        value: "1",
                        label: "正常"
                    },
                    {
                        value: "2",
                        label: "低水位"
                    },
                    {
                        value: "3",
                        label: "高水位"
                    },
                    {
                        value: "4",
                        label: "低压力"
                    },
                    {
                        value: "5",
                        label: "高压力"
                    }
                ],
                notice: "",
                options: regionDataPlus,
                address: [],
                start_time: "",
                end_time: "",
                equipment_number: "",
                province: "",
                city: "",
                area: "",
                loading: true, //加载动画
                checkAll: false,
                checkedEq: [],
                userAgent: "",
                Province: [],
                City: [],
                Area: [],
                Village: [],
                province_id: "",
                city_id: "",
                area_id: "",
                village_id: "",
                village_name: "",
                equipment_number: ''
            };
        },
        // 初始化执行
        created: function () {
            this.getProvince();
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
            this.userAgent = userAgent;
            var that = this;
            if (locache.get("deviceListPage") != null) {
                that.pageNo = locache.get("deviceListPage");
            }
            if (locache.get("deviceListPageSize") != null) {
                that.pageSize = locache.get("deviceListPageSize");
            }
            var page = that.pageNo; // 当前页
            var pageSize = that.pageSize; // 每页条数
            that.equipment_number = this.$route.query.equipment_number; // 接收设备编号
            that.equipment(page, pageSize); // 获取设备列表数据
        },
        inject: [
            'reload'
        ],
        methods: {
            RefreshFun() {
                // 调用reload方法，刷新整个页面
                this.reload()
            },
            //返回
            returnBack() {
                this.$router.back(-1);
            },
            searchVillage() { },
            chooseProvince(val) {
                console.log(val);
                this.getCity(val);
                this.city_id = "";
                this.area_id = "";
                this.village_name = "";
            },
            chooseCity(val) {
                this.getArea(val);
                this.area_id = "";
                this.village_name = "";
            },
            chooseArea(val) {
                this.getVillage(val);
                this.village_name = "";
            },
            //三级联动-省
            getProvince() {
                this.$post({
                    url: "Partner/Village/getEqProvince",
                    data: {},
                    success: data => {
                        this.Province = data.data;
                    }
                });
            }, //三级联动-市
            getCity(id) {
                this.$post({
                    url: "Partner/Village/getEqCity",
                    data: {
                        id: id
                    },
                    success: data => {
                        this.City = data.data;
                    }
                });
            }, //三级联动-区/县
            getArea(id) {
                this.$post({
                    url: "Partner/Village/getEqArea",
                    data: {
                        id: id
                    },
                    success: data => {
                        this.Area = data.data;
                    }
                });
            }, //园区列表
            getVillage(id) {
                this.$post({
                    url: "Partner/Village/getAllVillage",
                    data: {
                        province: this.province_id,
                        city: this.city_id,
                        area: this.area_id,
                        village_name: ""
                    },
                    success: data => {
                        this.Village = data.data;
                    }
                });
            },
            handleChange(value) { },
            //编辑
            edit: function (id) {
                this.$router.push({ path: "/edit", query: { id: id } });
            },
            //更多信息
            more: function (val, id) {
                this.$router.push({
                    path: "/moreinformation",
                    query: { equipment_number: val, id: id }
                });
            },

            // 每页
            handleSizeChange(val) {
                var that = this;
                var page = that.pageNo; // 当前页
                locache.set("deviceListPageSize", val);
                that.pageSize = val; // 当前每页显示条数
                that.equipment(page, val); // 获取设备列表数据
            },
            // 分页
            handleCurrentChange(val) {
                var that = this;
                var pageSize = that.pageSize; // 每页条数
                locache.set("deviceListPage", val);
                that.equipment(val, pageSize); // 获取设备列表数据
            },
            // 获取替换记录
            equipment: function (page, pageSize) {
                this.loading = true; //打开loading动画
                var that = this;
                // ajax请求
                that.$post({
                    url: "Partner/Equipment/replaceList",
                    data: {
                        page: page,
                        pageSize: pageSize,
                        equipment_number: that.equipment_number
                    },
                    success: data => {
                        this.loading = false; //关闭动画
                        if (data.code == 1000) {
                            that.tableData = []; // 清空数据
                            $.each(data.data.replaceList, function () {
                                this.checked = false;
                                that.tableData.push(this);
                            });
                            that.totalDataNumber = Number(data.data.count); // 总的数据
                        } else {
                            that.tableData = []; // 清空数据
                        }
                    }
                });
            },
            // 搜索事件
            serach: function () {
                var that = this;
                that.equipment_number = that.equipment_number;
                that.state = that.state;
                that.notice = that.notice;
                that.province = that.address[0];
                that.city = that.address[1];
                that.area = that.address[2];
                that.village_name = that.village_name;
                that.pageNo = 1; // 当前页
                locache.set("deviceListPage", that.pageNo);
                that.equipment(that.pageNo, that.pageSize); // 获取设备列表数据
            },
            //点击弹出二维码

            openCode: function (qrcode, base64_qr, sn) {
                var that = this;
                if (base64_qr == "") {
                    that.$message({
                        showClose: true,
                        message: "二维码生成中页面自动刷新",
                        duration: 1000,
                        onClose: function () {
                            that.$post({
                                url: "Partner/Equipment/mkQR",
                                data: { equpment_sn: sn },
                                success: data => {
                                    that.equipment();
                                }
                            });
                        }
                    });
                } else {
                    var content = '<img src="' + base64_qr + '" />';
                    that
                        .$alert(content, "下载二维码", {
                            dangerouslyUseHTMLString: true,
                            showClose: false,
                            showConfirmButton: true,
                            showCancelButton: true,
                            center: true,
                            cancelButtonText: "取消",
                            confirmButtonText: "下载二维码",
                            cancelButtonClass: "cancelButton",
                            confirmButtonClass: "confirmButton"
                        })
                        .then(() => {
                            that.download(qrcode, base64_qr);
                        })
                        .catch(() => { });
                }
            },
            //全选
            handleCheckAllChange: function (val) {
                var that = this;
                that.checkedEq = [];
                if (val == true) {
                    that.tableData.forEach(function (item) {
                        if (item.base64_qr != "" && item.base64_qr != null) {
                            item.checked = true;
                            var code = {
                                qrcode: item.equipment_number,
                                base64_qr: item.base64_qr
                            };
                            that.checkedEq.push(code);
                        }
                    });
                } else {
                    that.tableData.forEach(function (item) {
                        item.checked = false;
                    });
                    that.checkedEq = [];
                }
            },
            //单选
            handleCheckedChange: function (i) {
                var that = this;
                if (i.checked == true && i.base64_qr != "" && i.base64_qr != null) {
                    var code = { qrcode: i.equipment_number, base64_qr: i.base64_qr };
                    that.checkedEq.push(code);
                } else {
                    var result = [];
                    that.checkedEq.forEach(function (item) {
                        if (i.equipment_number != item.qrcode && item.base64_qr != "") {
                            result.push(item);
                        }
                    });
                    that.checkedEq = result;
                }
                var k = 0; //
                that.tableData.forEach(function (item) {
                    if (item.checked == false) {
                        k++;
                    }
                });

                if (k == 0) {
                    that.checkAll = true;
                } else {
                    that.checkAll = false;
                }
            },
            addother: function () {
                locache.set("deviceListPage", null);
                locache.set("deviceListPageSize", null);
                this.$router.push({ path: "/deviceadd" });
            },
            batchExport: function () {
                this.$message.warning("正在努力开发中，请稍候");
            },
            //多图下载
            openAllCode: function () {
                var that = this;
                if (that.checkedEq.length == 0) {
                    that.$message.warning("请至少选中一个设备，才能批量下载二维码");
                    return false;
                }
                that.checkedEq.forEach(function (item) {
                    that.sleep(500);
                    that.download(item.qrcode, item.base64_qr);
                });
            },
            //单张图片
            download: function (src, base64_qr) {
                if (base64_qr != "" && base64_qr != null) {
                    let link = document.createElement("a");
                    link.style.display = "none";
                    link.href = base64_qr;
                    link.setAttribute("download", src);
                    document.body.appendChild(link);
                    link.click();
                }


            },
            //图片下载间隔时间
            sleep: function (d) {
                for (var t = Date.now(); Date.now() - t <= d;);
            }
        },
        mounted() { },
        watch: {}
    };
</script>

<style scoped>
    #replacelist .el-input__inner {
        height: 30px !important;
    }

    #replacelist .devicewrap {
        /*padding: 0 40px;*/
    }

    #replacelist .searchform {
        width: 80%;
        font-size: 16px;
    }

    #replacelist .searchwrap {
        display: flex;
        align-items: center;
        /*justify-content: space-between;*/
        margin: 10px 0;
    }

    #replacelist .searchwrap .searchitem {
        display: flex;
        align-items: center;
    }

    #replacelist .searchwrap .searchitem button {
        margin-left: 15%;
    }

    #replacelist .searchform input {
        height: 30px;
    }

    #replacelist .searchform .el-range-editor.el-input__inner {
        height: 30px;
        width: 250px;
    }

    #replacelist .searchform .el-range-editor.el-input__inner input {
        height: auto;
    }

    #replacelist .searchform .inputitem {
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        padding: 0 15px;
    }

    #replacelist .searchitem .el-date-editor .el-range-input {
        width: 35%;
    }

    #replacelist .searchform .selected .el-input {
        width: 120px;
    }

    #replacelist .searchform button {
        background-color: #2c5586;
        color: #fff;
        border: none;
        border-radius: 4px;
        width: 80px;
        height: 30px;
        cursor: pointer;
        font-weight: bold;
    }

    #replacelist .rightbtn button {
        background-color: #2c5586;
        color: #fff;
        border: none;
        border-radius: 4px;
        width: 80px;
        height: 30px;
        cursor: pointer;
        font-weight: bold;
    }

    #replacelist .rightbtn .export {
        position: relative;
        margin-bottom: 5px;
        height: 105px;
    }

    #replacelist .rightbtn .export button {
        height: 30px;
        border: 1px solid #bf73ac;
        background-color: #fff;
        color: #bf73ac;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        margin: 10px 0;
    }

    #replacelist .rightbtn .export .addother {
        position: absolute;
        bottom: 0px;
        right: 0px;
        background-color: #2c5586;
        color: #fff;
        border: none;
        border-radius: 4px;
        width: 80px;
        height: 30px;
        cursor: pointer;
        font-weight: bold;
    }

    #replacelist .topsearchwrap {
        display: flex;
        justify-content: space-between;
    }

    .paginShow {
        margin-top: 40px;
        display: flex;
        justify-content: flex-end;
    }

    /*暂无数据*/
    #replacelist .noneshow {
        padding: 20px 0px;
        background: #fff;
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .cancelButton {
        width: 100px;
        height: 40px;
        background-color: #b3b2b2;
        color: #2c5586;
        font-size: 14px;
        font-weight: bold;
    }

    .confirmButton {
        width: 100px;
        height: 40px;
        background-color: #2c5586;
        color: #ffffff;
        font-size: 14px;
        font-weight: bold;
    }

    .cancelButton:hover,
    .cancelButton:focus {
        background-color: #b3b2b2;
        color: #2c5586;
    }

    .confirmButton:hover,
    .confirmButton:focus {
        background-color: #2c5586;
        color: #ffffff;
    }

    #replacelist table>tr>th:first-child>label>span {
        border-right: none;
    }

    #replacelist table>tr>th:first-child span {
        width: 14px;
        height: 14px;
        line-height: 14px;
    }
</style>